<template>
    <div class="lifeContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question"></div>
        </transition>
        <div class="choose">
            <div class="not" :style="setActive(notActive)" @click="notShow">
                <div class="point" :style="setpointActive(notActive)"></div>
                <p>不熬夜 作息很健康滴</p>
            </div>
            <div class="maybe" :style="setActive(maybeActive)" @click="maybeShow">
                <div class="point" :style="setpointActive(maybeActive)"></div>
                <p>偶尔熬熬啦</p>
            </div>
            <div class="long" :style="setActive(longActive)" @click="longShow">
                <div class="point" :style="setpointActive(longActive)"></div>
                <p>我是夜猫子选手</p>
            </div>
        </div>
        <div class="warning">
            <transition name="warning" appear>
                <div class="notWarning" v-if="notWarningShow"></div>
            </transition>
            <transition name="warning" appear>
                <div class="maybeWarning" v-if="maybeWarningShow"></div>
            </transition>
            <transition name="warning" appear>
                <div class="longWarning" v-if="longWarningShow"></div>
            </transition>
        </div>
        <div class="notNext" v-if="isShow"></div>
        <div class="next" v-if="!isShow" @click="gotoBody"></div>
    </div>
</template>

<script>
    export default {
        name:'myLife',
        data(){
            return{
                notActive:false,
                maybeActive:false,
                longActive:false,
                notWarningShow:false,
                maybeWarningShow:false,
                longWarningShow:false
            }
        },
        computed:{
            isShow:function(){
                if(this.notActive || this.maybeActive || this.longActive)
                    return false
                else
                    return true
            },
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            maybeShow(){
                this.longActive=false
                this.notActive=false
                this.maybeActive=true
                this.longWarningShow=false
                this.notWarningShow=false
                this.maybeWarningShow=true
            },
            notShow(){
                this.longActive=false
                this.maybeActive=false
                this.notActive=true
                this.longWarningShow=false
                this.notWarningShow=true
                this.maybeWarningShow=false
            },
            longShow(){
                this.longActive=true
                this.notActive=false
                this.maybeActive=false
                this.longWarningShow=true
                this.notWarningShow=false
                this.maybeWarningShow=false
            },
            setActive(ifActive){
                return ifActive === true ? 'border: 1px solid #199efc; backgroundColor: #e5f4fe' : 'border: 1px solid #FFF ; backgroundColor: #FFF'
            },
            setpointActive(ifActive){
                return ifActive === true ? 'borderRight: 0.06rem solid #199efc' : 'borderRight: 0.06rem solid #F6F8FA'
            },
            gotoBody(){
                const sleep=this.sleepStatus()
                localStorage.setItem('sleep',sleep)
                this.$router.push({
                    name:'weight',
                })
            },
            sleepStatus(){
                if(this.notActive==true){
                    return 0
                }
                else if(this.maybeActive==true){
                    return 1
                }
                else if(this.longActive==true){
                    return 2
                }
            }
        }
    }
</script>

<style scoped>
    .lifeContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-10lifeSituation.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .question{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-27ifNight.png);
        width: 5.68rem;
        height: 1.5rem;
        background-position: center;
        background-size: contain;
        left: 0.8rem;
        top:2.28rem;
    }
    .choose{
        width: 6.86rem;
        position: absolute;
        top:5.32rem;
        left: 0.32rem;
    }
    .choose>div{
        width: 100%;
        height: 1.5rem;
        background-color: #FFF;
        border-radius: .2rem;
        font-size: .28rem;
        color: #333333;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
        border: 1px solid #FFF;
        transition: all 0.5s;
        margin-bottom: 0.5rem;
    }
    .point{
        margin-left: 1.2rem;
        height: 0.5rem;
        border-right: 0.06rem solid #F6F8FA;
        margin-right: 0.3rem;
        border-radius: 0.04rem;
        transition: all 0.5s;
    }

    .warning{
        position: absolute;
        top:11.96rem;
        left: .62rem;
        width: 6.26rem;
        height: 1.52rem;
    }

    .warning>div{
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
    }
    .warning .notWarning{
        background-image: url(../assets/img/0-icon@2x/0-30notWarning.png);
    }
    .warning .maybeWarning{
        background-image: url(../assets/img/0-icon@2x/0-32maybeWarning.png);
    }
    .warning .longWarning{
        background-image: url(../assets/img/0-icon@2x/0-34longWarning.png);
    }

    .notNext{
        background-image: url(../assets/img/0-icon@2x/0-21notNext.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .warning-enter{
        opacity: 0;
        transform: scale(0);
    }
    .warning-enter-to{
        opacity: 1;
        transform: scale(1);
    }
    .warning-enter-active{
        transition: 0.5s;
    }
</style>